<template>
	<view class="gy-address-list">
		<view class="gy-address-item" v-for="(item, index) in props.list" :key="index">
		    <com-swipe-cell :right-width="256">
		        <view class="gy-address-card-box">
		            <view class="gy-address-region">
						<com-tag v-if="item.defaultStatus === 1">默认</com-tag>
						{{ item.provinceName }}{{ item.cityName }}{{ item.countyName }}
					</view>
		            <view class="gy-address-details">{{ item.address }}</view>
		            <view class="gy-address-user">
		                <view class="gy-address-user-name">{{ item.person }}</view>
		                <view class="gy-address-user-phone">{{ item.mobile }}</view>
		            </view>
		        </view>
		        <template #right>
		            <view class="gy-address-card-btns">
		                <view class="gy-address-card-btn-edit" @click.stop="emits('edit', item)">编辑</view>
		                <view class="gy-address-card-btn-del" @click.stop="emits('remove', item)">删除</view>
		            </view>
		        </template>
		    </com-swipe-cell>
		</view>
		<com-empty v-if="props.list.length === 0" showBtn type="address" btnText="添加地址" btnIcon="gy_icon_plus" text="暂无地址，请添加地址" @confirm="emits('edit', '')" />
	</view>
</template>

<script lang="ts" setup>

	const emits = defineEmits(["edit", "remove"]);

	const props = defineProps({
		list: {
			type: Array,
			default: () => []
		}
	});

</script>

<script lang="ts">
	export default {
		options: {
			multipleSlots: true,
			styleIsolation: 'shared',
			addGlobalClass: true,
			virtualHost: true
		}
	}
</script>

<style lang="scss" scoped>
	.gy-address-list{
		.gy-address-item{
			background-color: #fff;
			border-radius: var(--gy-border-radius-large);
			margin: var(--gy-gap);
			overflow: hidden;
			.gy-address-card-box{
			    padding: var(--gy-gap);
			    color: var(--gy-text-color-primary);
			    .gy-address-region{
			        font-size: var(--gy-font-size-medium);
					font-weight: bold;
					:deep(.gy-tag){
					    margin-right: 6rpx;
						vertical-align: 15%;
						background-color: var(--gy-color-primary);
						color: var(--gy-card-bg-color);
						border-radius: 10rpx;
					}
			    }
			    .gy-address-details{
			        margin-top: 15rpx;
			        font-size: var(--gy-font-size-base);
			        color: var(--gy-text-color-secondary);
			    }
			    .gy-address-user{
			        margin-top: 15rpx;
			        @include flex-start-center;
			        .gy-address-user-name{
			            margin-right: var(--gy-gap);
			        }
			        .gy-address-user-phone{
			            color: var(--gy-text-color-secondary);
			        }
			    }
			}
			.gy-address-card-btns{
			    width: 256rpx;
			    height: 100%;
			    @include flex-between-center;
			    background-color: var(--gy-color-primary);
			    border-radius: var(--gy-border-radius-large);
			    view{
			        width: 128rpx;
			        height: 100%;
			        @include flex-center-center;
			        color: #ffffff;
			        background-color: var(--gy-color-primary);
			        font-size: var(--gy-font-size-base);
			        border-radius: var(--gy-border-radius-large);
			    }
			    view:active{
			        opacity: 0.8;
			    }
			    .gy-address-card-btn-edit{
			        background-color: var(--gy-color-primary);
			    }
			    .gy-address-card-btn-del{
			        background-color: var(--gy-color-error);
			    }
			}
		}
	}
</style>
